<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>领取优惠券</title>
<link rel="stylesheet" type="text/css" href="css/weal.css"/>
<link rel="stylesheet" type="text/css" href="css/fans.css"/>
</head>

<body>

<div id="wrapper">
	
	<!--按钮-->
	<div class="main-btn">
		<input class="back-btn" type="button" value="返回" />
	</div>
	
	<!--优惠券详情-->
	<div class="weal-dtlMod">
		<h5 class="title dm-clearfix">
			<span class="txt">粉丝详情</span>
			<input class="edit-btn" type="button" value="编辑" />
		</h5>
		<div class="weal-info dm-clearfix" id="fansDtl">
			
			<div class="photo cover dm-left">
				<img src="image/test/photo.jpg" />
			</div>
			
			<div class="fans-info dm-left">
				<h5 class="wechatId">微信UnionID：TAuSKmanliSHINAT</h5>
				<h6><span>用户名：张三</span><span>性别：男</span><span>年龄：无</span><span>生日：无</span></h6>
				<h6>注册时间：2017-10-01 12：21：21</h6>
				<h6>收货地址（默认）：无</h6>
				<h6>手机号：无</h6>
				<h6>用户标签：无</h6>
				<h6>专属导购：暂无</h6>
			</div>
			<div class="ex-info dm-clearfix dm-left">
				<ul class="dm-left">
					<li class="name">当前等级</li>
					<li class="val">粉丝 </li>
				</ul>
				<ul class="dm-left">
					<li class="name">当前积分</li>
					<li class="val">1250</li>
				</ul>
				<ul class="dm-left">
					<li class="name">消费金额(元)</li>
					<li class="val">0.00</li>
				</ul>
			</div>
			
		</div>
	</div>
	
	<!--使用记录-->
	<div class="main-nav bg-w">
		<ul class="nav-box dm-clearfix">
			<li class="on" @click="tab(0)">粉丝足迹</li>
			<li @click="tab(1)">积分明细</li>
		</ul>
		<div class="main-table">
			<!--足迹-->
			<table class="dm-table" v-show="hisType == 0" cellpadding="0" cellspacing="0" width="100%" border="1" bordercolor="#ddd">
				<tr>
					<th width="30">序号</th>
					<th>足迹内容</th>
					<th width="180">足迹时间</th>
				</tr>
				<tr class="tc" v-for="(item,index) in history">
					<td>{{index+1}}</td>
					<td>{{item.cot}}</td>
					<td>{{item.time}}</td>
				</tr>
			</table>
			
			<!--明细-->
			<table class="dm-table" v-show="hisType == 1" cellpadding="0" cellspacing="0" width="100%" border="1" bordercolor="#ddd">
				<tr>
					<th width="30">序号</th>
					<th width="180">时间</th>
					<th>积分变更</th>
					<th>变更事项</th>
					<th>剩余积分</th>
				</tr>
				<tr class="tc" v-for="(item,index) in scoreData">
					<td>{{index+1}}</td>
					<td>{{item.time}}</td>
					<td>{{item.type}}</td>
					<td>{{item.res}}</td>
					<td>{{item.score}}</td>
				</tr>
			</table>
			
			<div class="pageMod">
				<input type="button" class="first-btn" value="首页" />
				<input type="button" class="prev-btn" value="上一页" />
				<div class="page-box">
					<a class="on">1</a>
					<a>2</a>
					<a>3</a>
					<a>4</a>
					<span>…</span>
					<a>100</a>
				</div>
				<input type="button" class="next-btn" value="下一页" />
				<input type="button" class="last-btn" value="末页" />
			</div>
		</div>
	</div>
	
</div>

<script src="js/lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="data/data.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

var vm = new Vue({
	el:'#wrapper',
	data:{
		history:data.fansHis,
		scoreData:data.score,
		hisType:0,
	},
	methods:{
		tab:function(type){
			$(".nav-box li").eq(type).addClass('on').siblings().removeClass('on');
			this.hisType = type;
		},
	},
	created:function(){
		console.log(this.hisType);
	},
});

</script>

</body>
</html>
